<template>
  <div class="containers">
    <div class="card">
      <div class="scanner-wrapper item">
        <div class="scanner-bg">
          <div class="corner-1 common"></div>
          <div class="corner-2 common"></div>
          <div class="corner-3 common"></div>
          <div class="corner-4 common"></div>
          <!-- <div id="reader" class="scanner-reader"></div> -->
          <div class="sweep-img">
            <img class="img" src="../../src/assets/operate_img_sweep.png" />
          </div>
          <div class="ab"></div>
        </div>
      </div>
      <!-- 摄像头 -->
      <div class="camare">
        <qrcode-stream @error="onError" @detect="onDetect" />
      </div>
    </div>
    <div class="scanner-tip item">
      <span>请对准二维码扫码</span>
      <p>扫码结果:{{ textString }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const textString = ref("")
interface QRtype {
  [key: string]: any;
}
/**
 * 扫码结果回调方法
 * @param detectedCodes
 */
const onDetect = (detectedCodes: QRtype) => {
  console.log(detectedCodes);
  const decodedText = detectedCodes.map((code: QRtype) => code.rawValue);
  (async () => {
    textString.value = decodedText[0];
    console.log(textString.value);
  })();
};

const error = ref("");
/**
 *
 * @param err
 */
const onError = (err: QRtype) => {
  error.value = `[${err.name}]: `;

  if (err.name === "NotAllowedError") {
    error.value += "you need to grant camera access permission";
  } else if (err.name === "NotFoundError") {
    error.value += "no camera on this device";
  } else if (err.name === "NotSupportedError") {
    error.value += "secure context required (HTTPS, localhost)";
  } else if (err.name === "NotReadableError") {
    error.value += "is the camera already in use?";
  } else if (err.name === "OverconstrainedError") {
    error.value += "installed cameras are not suitable";
  } else if (err.name === "StreamApiNotSupportedError") {
    error.value += "Stream API is not supported in this browser";
  } else if (err.name === "InsecureContextError") {
    error.value +=
      "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.";
  } else {
    error.value += err.message;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
// @media only screen and (min-device-height: 669px) and (max-device-height: 1000px) {
$scannerSize: 300px;
$reader: 280px;

.containers {
  background-color: #0b3de0;
  overflow: auto;
  // padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  height: 100ch;
  position: relative;
  z-index: 10;
  overflow-x: hidden;

  .item {
    flex: 1;
  }

  .card {
    margin-top: 40px;
    width: auto;
    height: 340px;
    position: relative;

    .camare {
      position: absolute;
      top: 0;
      left: 0;
      width: auto;
      height: 320px;
      z-index: 1;
      // display: none;
    }

    .scanner-wrapper {
      // padding-top: 21px;
      display: flex;
      justify-content: center;
      z-index: 99;
      height: 318px;
      position: relative;

      .ab {
        width: $scannerSize;
        height: $scannerSize;
        background-color: transparent;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // border: 1px solid rgb(255, 0, 242);
      }

      .ab::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -100%;
        width: 100%;
        height: 110%;
        background-color: #0b3de0;
        z-index: 99;
      }

      .ab::after {
        content: "";
        position: absolute;
        top: -10px;
        right: -100%;
        width: 100%;
        height: 110%;
        background-color: #0b3de0;
        z-index: 99;
      }

      .scanner-bg {
        width: $scannerSize;
        height: $scannerSize;
        background-color: transparent;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .common {
          position: absolute;
          width: 13.33px;
          height: 13.33px;
        }

        .corner-1 {
          left: 8.89px;
          top: 8.89px;
          border-left: 2.22px solid #0b3de0;
          border-top: 2.22px solid #0b3de0;
        }

        .corner-2 {
          right: 8.89px;
          top: 8.89px;
          border-right: 2.22px solid #0b3de0;
          border-top: 2.22px solid #0b3de0;
        }

        .corner-3 {
          right: 8.89px;
          bottom: 8.89px;
          border-right: 2.22px solid #0b3de0;
          border-bottom: 2.22px solid #0b3de0;
        }

        .corner-4 {
          left: 8.89px;
          bottom: 8.89px;
          border-left: 2.22px solid #0b3de0;
          border-bottom: 2.22px solid #0b3de0;
        }

        .sweep-img {
          position: absolute;
          animation: moveAnimation 1.6s infinite alternate;
          margin: 0 8.89px;

          .img {
            width: 100%;
          }
        }

        .scanner-reader {
          width: $reader;
          height: $reader;
          overflow: hidden;

          #qr-canvas-visible {
            width: 200px;
            height: 200px;
          }
        }
      }
    }
  }

  .scanner-tip {

    padding-top: 18px;
    text-align: center;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    line-height: 27px;
    p{
      color: red;
    }
  }
}

@keyframes moveAnimation {
  0% {
    top: 0px;
  }

  100% {
    top: 88%;
  }
}
</style>